<template>
  <span
    class="songItem"
    :class="{ itemWidth: type === 'collect' }"
    @click="handelClick(itemData?.id, itemData, listCardData)"
  >
    <img
      v-lazy="
        itemData?.picUrl ||
        itemData?.coverImgUrl ||
        listCardData?.coverImgUrl ||
        itemData?.img1v1Url ||
        itemData?.avatarUrl
      "
      alt=""
    />
    <span>{{
      itemData?.name || listCardData?.name || itemData?.nickname
    }}</span>
  </span>
</template>
<script>
export default {
  data() {
    return {
      item: 123
    }
  },
  props: {
    itemData: {
      type: [Object, Array]
    },
    listCardData: {
      type: Object,
      default() {
        return {}
      }
    },
    type: {
      type: String,
      default: ''
    }
  },
  methods: {
    handelClick(id, itemData, listCardData) {
      // console.log(itemData)
      this.$emit('handleClick', id)
      this.$emit('routerClick', itemData?.userId || itemData?.id)
      this.$emit('listCardDataClick', listCardData?.id)
    }
  },
  created() {
    // console.log(this.itemData)
  }
}
</script>
<style lang="scss" scoped>
.itemWidth {
  width: 120px;
  height: 120px;
  cursor: pointer;
}
.songItem {
  display: flex;
  flex-direction: column;
  transition: all 0.5s;
  &:hover {
    transform: translate(-3px, -10px);
    img {
      box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
      // border-radius: 10px;
    }
    span {
      text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
    }
  }
  img {
    width: 100%;
    height: 224px;

    border-radius: 10px;
    transition: all 0.5s;
    margin-bottom: 5px;
  }
  span {
    transition: all 0.5s;
  }
}
</style>
